<template>
  <div class="comments">
	      <el-form>
			  <el-form-item  :model="form" >
				  <el-input
				    type="textarea"
				    :rows="2"
				    placeholder="请输入内容"
				    v-model="form.content">
				  </el-input>
			  </el-form-item>
			  <el-form-item>
			  		<div @click="commentsHandle" style="text-align: right;">评论</div>
			  </el-form-item>
		  </el-form>
		  <div class="comments-title">精彩评论</div>
		  <div v-for="(item,index) in commentsList" :key="index" class="comments-item">
			<div>
				<el-image :src="item.user.avatarUrl"></el-image>
			</div>  
		  	<div class="comments-item-right">
				<div><span style="color: #1679c5;">{{item.user.nickname}}:</span>{{item.content}}</div>
				<div>{{item.time | formatDate}}</div>
			</div>
		  </div>
		  
  </div>
</template>
<script>
import {formatDate} from 'utils/data';
import {_postComment} from 'network/detail.js'
export default {
  name:'Comment',
  props:['commentsList','id'],
  data(){
    return{
	   form:{
		   content:'',
		   t:1,
		   type:0,
		  
	   }
    }
  },
  created(){
  },
  methods:{
     commentsHandle(){
		this.form.id =this.id
		_postComment(this.form).then(res=>{
			// console.log(res);
		})
	 }
  },
  filters:{
	  formatDate(time){
		  if(time=== null) {
			  return '无'
		  }else {
			  let date = new Date(time);
			  return formatDate(date, "yyyy-MM-dd hh:mm:ss");
	  }
	 }
  }
}
</script>

<style lang="less" scoped>
	.comments{
		width: 100%;
		padding: 10px 0;
		font-size: 14px;
		.comments-title{
			padding-top: 10px;
		}
		.comments-item{
			padding: 8px 20px;
			display: flex;
			.el-image{
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			.comments-item-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 20px;
			}
		}
	}
   /deep/ .el-form-item__content{
	   line-height: 25px;
   }
   /deep/ .el-form-item{
	   margin-top: 6px;
	   margin-bottom: 6px;
   }
</style>
